<template>
  <div class="alldiv f-col f-center"  v-if="show" @click="show=false">
    <div class=" aldiv f-col f-center ani-appear">
      <el-text style="font-size:30px;">🥰软件信息</el-text>
      <el-text style="font-size:20px;">您的学习单词数：
        <el-text style="font-size:20px;" type="warning">{{formDate.allWords}}</el-text>
      </el-text>
      <el-text style="font-size:20px;">您完全熟悉单词：
        <el-text style="font-size:20px;" type="success">{{formDate.mCount}}</el-text>
      </el-text>
      <el-text style="font-size:20px;">数据库总单词数：
        <el-text style="font-size:20px;" type="info">{{formDate.wordCount}}</el-text>
      </el-text>
      <el-text style="font-size:20px;">🤗软件作者：
          <el-text style="font-size:20px;" type="danger">Prodense</el-text>
      </el-text>
    </div>
  </div>

</template>
<script setup>
import {ref,onMounted,defineExpose} from 'vue';
import {getStatics} from "@/apis/apis";
let show=ref(false);
defineExpose({
  apply:function (){
    loadMessage();
    show.value=true;
  }
})
let formDate=ref({
  "allWords": 46,
  "mCount": 4,
  "wordCount": 3791
});
function loadMessage(){
  getStatics({
  }).then(d=>{
    formDate.value=d.data.data
  })
}
</script>
<style scoped>
.alldiv{
  width: 100%;
  height: 100vh;
  position: absolute;
  top:0px;
}
.aldiv{
  width: 300px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(10px);
  border-radius: 10px;

}
</style>